@@include('header.htm', {
  "title": "Card - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "card"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Card</h1>
	
	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "card"
	})
</div>

<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Card with Image</h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5">Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/card/#example" target="_blank"> More
					Details </a></p>
			</div>

			<div class="col-md-6 col-xl-3">
				<div class="card mb-4">
					<img class="card-img-top" src="assets/img/elements/cc1.jpg">

					<div class="card-body">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="btn btn-outline-primary">Go somewhere</a>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-3">
				<div class="card mb-4">
					<div class="card-body">
						<img class="card-img-top mb-4 rounded" src="assets/img/elements/cc1a.jpg">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="btn btn-outline-primary">Go somewhere</a>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-3">
				<div class="card  mb-4 p-0">
					<h5 class="card-title text-primary pt-4 pb-2 px-3">Card Title</h5>
					<img class="card-img rounded-0" src="assets/img/elements/cc1b.jpg">

					<div class="card-body">
						<p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="btn btn-link px-0">Card Link</a>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-3">
				<div class="card mb-4">
					<div class="card-body">
						<h5 class="card-title text-primary mb-1">Card Title</h5>
						<p class="pb-3">Sub-heading text</p>
						<img class="mb-4 card-img" src="assets/img/elements/cc1c.jpg">
						<p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="btn btn-link px-0">Card Link</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Second Row -->
<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Text Alignment </h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5">You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/card/#text-alignment" target="_blank"> more details.</a></p>
			</div>

			<div class="col-md-6 col-xl-4">
				<div class="card py-3 mb-4">
					<div class="card-body">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="btn btn-outline-primary">Go somewhere</a>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-4">
				<div class="card mb-4 py-3">
					<div class="card-body text-center">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="btn btn-outline-primary">Go somewhere</a>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-4">
				<div class="card mb-4 py-3">
					<div class="card-body text-right">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="btn btn-outline-primary">Go somewhere</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Third Row -->
<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2> Card with image overlay </h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5">Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/card/#image-overlays" target="_blank"> more details.</a></p>
			</div>

			<div class="col-md-12 col-lg-6 col-xl-4">
				<div class="card mb-4 bg-gradient-dark">
					<img class="card-img-top" src="assets/img/elements/cc2a.jpg">
					<div class="card-img-overlay absolute-bottom">
						<h5 class="card-title text-primary text-white">Card Title</h5>
						<p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="text-white">Last update 2 mins ago</a>
					</div>
				</div>
			</div>

			<div class="col-md-12 col-lg-6 col-xl-4">
				<div class="card mb-4">
					<img class="card-img-top" src="assets/img/elements/cc2b.jpg">
					<div class="card-img-overlay absolute-middle">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="text-primary">Last update 2 mins ago</a>
					</div>
				</div>
			</div>

			<div class="col-md-12 col-lg-6 col-xl-4">
				<div class="card mb-4">
					<img class="card-img-top" src="assets/img/elements/cc2c.jpg">
					<div class="card-img-overlay">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
						<a href="#" class="text-primary">Last update 2 mins ago</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Card with Deck </h2>
	</div>

	<div class="card-body">
		<p class="mb-5">Need a set of equal width and height cards that aren’t attached to one another? Use card decks. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/card/#card-decks" target="_blank"> More Details	</a></p>

		<div class="card-deck">
			<div class="card">
				<img class="card-img-top" src="assets/img/elements/cc3a.jpg" alt="Card image cap">

				<div class="card-body">
					<h5 class="card-title text-primary">Card Title</h5>
					<p class="card-text pb-3">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little
						bit longer.</p>
					<p class="card-text">
						<small class="text-muted">Last updated 3 mins ago</small>
					</p>
				</div>
			</div>

			<div class="card">
				<img class="card-img-top" src="assets/img/elements/cc3b.jpg" alt="Card image cap">

				<div class="card-body">
					<h5 class="card-title text-primary">Card Title</h5>
					<p class="card-text pb-3">This card has supporting text below as a natural lead-in to additional content.</p>
					<p class="card-text">
						<small class="text-muted">Last updated 3 mins ago</small>
					</p>
				</div>
			</div>

			<div class="card">
				<img class="card-img-top" src="assets/img/elements/cc3c.jpg" alt="Card image cap">

				<div class="card-body">
					<h5 class="card-title text-primary">Card Title</h5>
					<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
						content than the first to show that equal height action.</p>
					<p class="card-text">
						<small class="text-muted">Last updated 3 mins ago</small>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Using utilities</h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5">Use our handful of available sizing utilities to quickly set a card’s width. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/card/#using-utilities" target="_blank"> more details.</a></p>
			</div>

			<div class="col-md-6">
				<div class="card mb-4">
					<div class="card-body">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
							aliqua. Ut enim ad minim veniam.</p>
						<a href="#" class="btn btn-outline-primary">Go somewhere</a>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="card mb-4">
					<div class="card-body">
						<h5 class="card-title text-primary">Card Title</h5>
						<p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
						<a href="#" class="btn btn-outline-primary">Go somewhere</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Cards Groups </h2>
	</div>

	<div class="card-body">
		<p class="mb-5">Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use	display: flex; to achieve their uniform sizing. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/card/#card-groups" target="_blank"> more details.</a></p>

		<div class="card-group">
			<div class="card">
				<img class="card-img-top" src="assets/img/elements/cc4a.jpg" alt="Card image cap">
				<div class="card-body">
					<h5 class="card-title text-primary">Card Title</h5>
					<p class="card-text pb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little
						bit longer.</p>
					<p class="card-text">
						<small class="text-muted">Last updated 3 mins ago</small>
					</p>
				</div>
			</div>

			<div class="card">
				<img class="card-img-top" src="assets/img/elements/cc4b.jpg" alt="Card image cap">

				<div class="card-body">
					<h5 class="card-title text-primary">Card Title</h5>
					<p class="card-text pb-4">This card has supporting text below as a natural lead-in to additional content.</p>
					<p class="card-text">
						<small class="text-muted">Last updated 3 mins ago</small>
					</p>
				</div>
			</div>

			<div class="card">
				<img class="card-img-top" src="assets/img/elements/cc4c.jpg" alt="Card image cap">

				<div class="card-body">
					<h5 class="card-title text-primary">Card Title</h5>
					<p class="card-text pb-4">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
						content than the first to show that equal height action.</p>
					<p class="card-text">
						<small class="text-muted">Last updated 3 mins ago</small>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card card-default">
	<div class="card-header card-header-border-bottom">
		<h2>Background and color </h2>
	</div>

	<div class="card-body">
		<div class="row">
			<div class="col-12">
				<p class="mb-5">Use text and background utilities to change the appearance of a card. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/card/#background-and-color" target="_blank"> more details.</a></p>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card text-white bg-primary mb-3">
					<div class="card-header bg-primary">Header</div>
					<div class="card-body">
						<h5 class="card-title">Primary card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card text-white bg-secondary mb-3">
					<div class="card-header bg-secondary">Header</div>
					<div class="card-body">
						<h5 class="card-title">Secondary card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card text-white bg-success mb-3">
					<div class="card-header bg-success">Header</div>
					<div class="card-body">
						<h5 class="card-title">Success card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card text-white bg-danger mb-3">
					<div class="card-header bg-danger">Header</div>
					<div class="card-body">
						<h5 class="card-title">Danger card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card text-white bg-warning mb-3">
					<div class="card-header bg-warning">Header</div>
					<div class="card-body">
						<h5 class="card-title">Warning card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card text-white bg-info mb-3">
					<div class="card-header bg-info">Header</div>
					<div class="card-body">
						<h5 class="card-title">Info card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card bg-light mb-3">
					<div class="card-header bg-light">Header</div>
					<div class="card-body">
						<h5 class="card-title text-primary">Light card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-6 col-xl-4">
				<div class="card text-white bg-dark mb-3">
					<div class="card-header bg-dark">Header</div>
					<div class="card-body">
						<h5 class="card-title">Dark card Title</h5>
						<p class="card-text">Some quick example text to build on the card Title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
